@GENERIC_COLOR_POSTFIX: ".contrast";

/**
* @name 1. Font family
* @type text
* @group base.typography
*/
@base-font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;

/**
* @name 80. Background color
* @type color
* @group base.common
*/
@base-bg: #000;
@base-inverted-bg: #fff - @base-bg;

@base-border-color: #fff;
@base-border-radius: 4px;
@base-contrast-color: #cf00d7;

@base-hover-color: @base-contrast-color;
@base-focus-color: @base-contrast-color;
@base-shadow-color: transparent;

@base-default: #52BBE7;
@base-success: #71C35E;
@base-danger: #EE5959;
@base-warning: #ffb277;
@base-info: 80b9e4;

/**
* @name 10. Text color
* @type color
* @group base.typography
*/
@base-text-color: #fff;
@base-icon-color: #fff;

@base-inverted-text-color: #fff - @base-text-color;
@base-inverted-icon-color: #fff - @base-text-color;

/**
* @name 30. Link color
* @type color
* @group base.typography
*/
@base-link-color: @base-text-color;

@typography-bg: @base-bg;
@typography-color: @base-text-color;
@typography-link-color: @base-link-color;

/**
* @name 1. Invalid widget state - active color
* @type color
* @group editors.validation
*/
@base-invalid-color: #EA4444;

@VALIDATION_MESSAGE_COLOR: @base-text-color;
@VALIDATION_MESSAGE_BACKGROUND_COLOR: @base-invalid-color;

@VALIDATION_SUMMARY_COLOR: @base-invalid-color;

@validation-overlay-border-radius: @base-border-radius;

/**
* @name 20. Selected state text color
* @type color
* @group base.common
*/
@base-selected-text-color: @base-inverted-text-color;

@datagrid-row-hovered-color: @base-text-color;
/**
* @name 2. Invalid widget state - border color
* @type color
* @group editors.validation
*/
@base-invalid-faded-border-color: @base-invalid-color;
/**
* @name 20. Label color
* @type color
* @group base.typography
*/
@base-label-color: @base-text-color;

// Badges
/**
* @name 10. Badge text color
* @type color
* @group badges
*/
@badge-color: @base-inverted-text-color;
@badge-invalid-bg: @base-invalid-color;

/**
* @name 20. Badge background color
* @type color
* @group badges
*/
@badge-bg: @base-contrast-color;

// TextEditor
/**
* @name 20. Border color
* @type color
* @group editors.texteditors
*/
@texteditor-border-color: @base-border-color;

/**
* @name 10. Background color
* @type color
* @group editors.texteditors
*/
@texteditor-bg: @base-bg;

/**
* @name 30. Focused border color
* @type color
* @group editors.texteditors
* @paletteColorOpacity 1
*/
@texteditor-focused-border-color: @base-focus-color;
@texteditor-hover-bg: @base-bg;
@texteditor-hover-border-color: @base-border-color;

@texteditor-color: @base-text-color;
@texteditor-disabled-opacity: .5;
@texteditor-readonly-border-color: darken(@texteditor-border-color, 50%);

@texteditor-placeholder-color: @base-text-color;

@texteditor-button-clear-icon-color: @base-icon-color;

@texteditor-invalid-focused-border-color: @base-invalid-color;
@texteditor-invalid-faded-border-color: @base-invalid-faded-border-color;

@texteditor-border-radius: @base-border-radius;
@texteditor-input-border-radius: @base-border-radius;

//TextBox
@textbox-search-icon-color: @base-icon-color;

// RadioGroup
/**
* @name 10. Background color
* @type color
* @group editors.radiogroup
*/
@radiogroup-checked-bg: @base-inverted-bg;

@radiogroup-border-color: @base-border-color;
@radiogroup-bg: @base-bg;

/**
* @name 40. Active state background color
* @type color
* @group editors.radiogroup
*/
@radiobutton-active-bg: @base-inverted-bg;
@radiogroup-hover-border-color: @base-border-color;
@radiobutton-focused-border-color: @base-focus-color;

@radiobutton-invalid-hover-border-color: @base-invalid-color;
@radiobutton-invalid-focused-border-color: @base-invalid-color;
@radiobutton-invalid-faded-border-color: @base-invalid-faded-border-color;

@radiogroup-readonly-border-color: darken(@radiogroup-border-color, 50%);
@radiogroup-readonly-bg: @radiogroup-bg;

// Accordion
/**
* @name 10. Active item title background color
* @type color
* @group navigations.accordion
*/
@accordion-item-title-opened-bg: transparent;
/**
* @name 20. Item border color
* @type color
* @group navigations.accordion
*/
@accordion-item-border-color: @base-border-color;

/**
* @name 40. Focused item border color
* @type color
* @group navigations.accordion
*/
@accordion-item-focused-border-color: @base-focus-color;
/**
* @name 50. Text color
* @type color
* @group navigations.accordion
*/
@accordion-color: @base-text-color;
/**
* @name 60. Item title text color
* @type color
* @group navigations.accordion
*/
@accordion-title-color: @base-text-color;
/**
* @name 70. Item title active state text color
* @type color
* @group navigations.accordion
*/
@accordion-title-active-color: @base-inverted-text-color;
/**
* @name 80. Item title active state background color
* @type color
* @group navigations.accordion
*/
@accordion-title-active-bg: @base-inverted-bg;
/**
* @name 90. Item title hovered state background color
* @type color
* @group navigations.accordion
*/
@accordion-item-hover-bg: @base-hover-color;
/**
* @name 100. Item active state icon color
* @type color
* @group navigations.accordion
*/
@accordion-icon-active-color: @base-inverted-text-color;
@accordion-icon-color: @base-icon-color;

// Button

@button-icon-color: @base-icon-color;
@button-inverted-icon-color: @base-inverted-icon-color;

@button-border-radius: @base-border-radius;

@button-disabled-text-opacity: .5;
@button-disabled-icon-opacity: .6;

// Normal button
@button-normal-border-color: @base-border-color;
@button-normal-bg: @base-bg;
@button-normal-shadow-color: transparent;

@button-normal-hover-bg: @base-hover-color;
@button-normal-hover-border-color: @base-border-color;
@button-normal-hover-shadow-color: transparent;

@button-normal-focused-bg: @base-bg;
@button-normal-focused-border-color: @base-focus-color;
@button-normal-focused-shadow-color: transparent;

@button-normal-active-bg: @base-inverted-bg;
@button-normal-active-border-color: transparent;
@button-normal-active-shadow-color: transparent;

@button-icon-color: @base-icon-color;
@button-normal-active-color: @base-inverted-text-color;

@button-normal-icon-color: @button-icon-color;

// Default button
@button-default-border-color: @base-default;
@button-default-bg: @base-default;
@button-default-color: @base-inverted-text-color;

@button-default-hover-border-color: saturate(darken(@base-default, 28.7%), 24.4%);
@button-default-hover-bg: @base-default;

@button-default-focused-border-color: saturate(darken(@base-default, 28.7%), 24.4%);
@button-default-focused-bg: @base-default;

@button-default-active-border-color: saturate(darken(@base-default, 28.7%), 24.4%);
@button-default-active-bg: saturate(darken(@base-default, 28.7%), 24.4%);

@button-default-icon-color: @button-inverted-icon-color;

// Danger button
@button-danger-border-color: @base-danger;
@button-danger-bg: @base-danger;
@button-danger-color: @base-inverted-text-color;

@button-danger-hover-border-color: desaturate(@base-danger, 13.5%);
@button-danger-hover-bg: @base-danger;

@button-danger-focused-border-color: desaturate(@base-danger, 13.5%);
@button-danger-focused-bg: @base-danger;

@button-danger-active-border-color: desaturate(@base-danger, 13.5%);
@button-danger-active-bg: desaturate(@base-danger, 13.5%);

@button-danger-icon-color: @button-inverted-icon-color;

// Success button

@button-success-border-color: @base-success;
@button-success-bg: @base-success;
@button-success-color: @base-inverted-text-color;

@button-success-hover-border-color: saturate(darken(@base-success, 30.2%), 52.5%);
@button-success-hover-bg: @base-success;

@button-success-focused-border-color: saturate(darken(@base-success, 30.2%), 52.5%);
@button-success-focused-bg: @base-success;

@button-success-active-border-color: saturate(darken(@base-success, 30.2%), 52.5%);
@button-success-active-bg: saturate(darken(@base-success, 30.2%), 52.5%);

@button-success-icon-color: @button-inverted-icon-color;

/**
* @name 10. Text color
* @type color
* @group buttons.normal
*/
@button-normal-color: @base-text-color;

// Checkbox
/**
* @name 10. Border color
* @type color
* @group editors.checkbox
*/
@checkbox-border-color: @base-border-color;
@checkbox-checked-color: @base-text-color;
@checkbox-indeterminate-bg: @base-inverted-bg;

/**
* @name 70. Focused state border color
* @type color
* @group editors.checkbox
*/
@checkbox-focused-borderd-color: @base-focus-color;

/**
* @name 40. Background color
* @type color
* @group editors.checkbox
*/
@checkbox-bg: @base-bg;

/**
* @name 20. Hovered state border color
* @type color
* @group editors.checkbox
*/
@checkbox-hover-border-color: @base-border-color;

/**
* @name 80. Active state background color
* @type color
* @group editors.checkbox
*/
@checkbox-active-icon-bg: @base-inverted-bg;

@checkbox-invalid-focused-border-color: @base-invalid-color;
@checkbox-invalid-faded-border-color: @base-invalid-faded-border-color;

@checkbox-readonly-border-color: darken(@checkbox-border-color, 50%);
@checkbox-readonly-bg: @checkbox-bg;

@checkbox-icon-border-radius: @base-border-radius - 2px;

// Fileuploader
/**
* @name 10. Filename text color
* @type color
* @group editors.fileuploader
*/
@fileuploader-filename-color: @base-text-color;

/**
* @name 20. File status text color
* @type color
* @group editors.fileuploader
*/
@fileuploader-falename-status-color: @base-text-color;

/**
* @name 30. Border color on dragover
* @type color
* @group editors.fileuploader
*/
@fileuploader-border-color: @base-border-color;

// Gallery

/**
* @name 10. Indicator background color
* @type color
* @group gallery
*/
@gallery-indicator-bg: @base-bg;
/**
* @name 20. Selected indicator background color
* @type color
* @group gallery
*/
@gallery-indicator-item-selected-bg: @base-inverted-bg;
/**
* @name 30. Focused indicator background color
* @type color
* @group gallery
*/
@gallery-indicator-focused-bg: @base-inverted-bg;

@gallery-indicator-item-border-color: @base-border-color;
@gallery-indicator-selected-border-color: #fff - @base-border-color;


@gallery-navbutton-degradation-bg: @base-inverted-bg;



@gallery-nav-arrow-color: @base-inverted-text-color;
/**
* @name 30. Navigation button color
* @type color
* @group gallery
*/
@gallery-navbutton-hover-color: @base-hover-color;
/**
* @name 30. Active navigation button color
* @type color
* @group gallery
*/
@gallery-navbutton-active-color: @base-text-color;
@gallery-navbutton-border-radius: @base-border-radius - 4px;

// List
/**
* @name 20. Item border color
* @type color
* @group list
*/
@list-border-color: @base-border-color;
/**
* @name 30. Group header background color
* @type color
* @group list
*/
@list-group-header-bg: @base-inverted-bg;
/**
* @name 10. Item text color
* @type color
* @group list
*/
@list-normal-color: @base-text-color;
/**
* @name 20. Group header text color
* @type color
* @group list
*/
@list-group-color: @base-inverted-text-color;
/**
* @name 30. Hovered item background color
* @type color
* @group list
* @paletteColorOpacity .15
*/
@list-item-hover-bg: @base-hover-color;
/**
* @name 40. Selected item state background color
* @type color
* @group base.common
* @paletteColorOpacity .25
*/
@list-item-selected-bg: @base-inverted-bg;
/**
* @name 50. Focused selected item state background color
* @type color
* @group base.common
* @paletteColorOpacity .7
*/
@list-item-focused-selected-bg: @base-inverted-bg;
/**
* @name 60. Focused item state background color
* @type color
* @group base.common
* @paletteColorOpacity 1
*/
@list-focused-bg: @base-focus-color;
@list-item-color: @base-text-color;
@list-item-hover-color: @base-text-color;
@list-item-selected-color: @base-inverted-text-color;
@list-item-focus-color: @base-text-color;
@list-item-active-color: @base-inverted-text-color;

@list-item-active-bg: @base-inverted-bg;
@list-holdmenu-bg: @base-bg;
@list-holdmenu-border-color: @base-border-color;
@list-holdmenu-shadow-color: @base-shadow-color;

@list-menu-button-default-color: @button-default-color;
@list-menu-button-default-bg: @button-default-bg;

@list-menu-button-delete-color: @button-danger-color;
@list-menu-button-delete-bg: @button-danger-bg;

@list-item-ghost-bg: @base-bg;
@list-chevron-focus-color: @base-inverted-text-color;
@list-item-ghost-color: @base-text-color;
@list-item-ghost-border-color: @base-border-color;
@list-item-ghost-shadow-color: @base-shadow-color;

@list-icon-color: @base-icon-color;

@list-group-header-border-bottom: 1px solid @list-border-color;
@list-group-header-default-padding-top: 10px;
@list-group-header-compact-padding-top: 5px;
@list-item-chevron-icon-color: @base-icon-color;

// Overlay
@overlay-content-shadow-color: @base-shadow-color;
@overlay-border-color: @base-border-color;
/**
* @name 10. Content background color
* @type color
* @group overlays.common
*/
@overlay-content-bg: @base-bg;
/**
* @name 40. Shader background color
* @type color
* @group overlays.common
*/
@overlay-shader-bg: @base-shadow-color;
/**
* @name 50. Focus border color
* @type color
* @group overlays.common
*/
@overlay-focus-border-color: @base-border-color;
// Popup
/**
* @name 20. Header background color
* @type color
* @group overlays.common
*/
@popup-title-bg: @base-bg;
@popup-title-color: @base-text-color;
@popup-title-border-color: @base-border-color;

@popup-bottom-bg: @popup-title-bg;
@popup-bottom-color: @base-text-color;

@popup-border-radius: @base-border-radius + 2px;

// Popover
@popover-arrow-bg: @base-bg;

// Toast
@toast-shadow-color: @base-shadow-color;

@toast-border-radius: @base-border-radius + 2px;

/**
* @name 10. Text color
* @type color
* @group overlays.toasts
*/
@toast-color: @base-inverted-text-color;

@dropdowneditor-button-hover-border-color: @base-border-color;
@dropdowneditor-button-active-border-color: transparent;

@dropdowneditor-button-hover-bg: @base-bg;
@dropdowneditor-button-active-bg: @base-inverted-bg;

@dropdowneditor-icon-color: @base-icon-color;
@dropdowneditor-icon-active-color: @base-inverted-icon-color;

@dropdowneditor-icon-border-radius: @base-border-radius - 1px;

// Lookup

@lookup-icon-color: @base-icon-color;
@lookup-validation-message-color: @base-invalid-color;

// Selectbox
/**
* @name 10. Item background color
* @type color
* @group editors.selectbox
*/
@selectbox-list-bg: @base-bg;
@selectbox-shadow-color: @base-shadow-color;

// Tabs
/**
* @name 45. Bottom layer background color
* @type color
* @group navigations.tabs
*/
@tabs-tab-bg: @base-bg;

/**
* @name 50. Hover background color
* @type color
* @group navigations.tabs
*/
@tabs-tab-hover-bg: @base-hover-color;

/**
* @name 20. Selected item background color
* @type color
* @group navigations.tabs
*/
@tabs-tab-selected-bg: @base-inverted-bg;

@tabs-tab-selected-color: @base-inverted-text-color;

@tabs-tab-icon-color: @base-icon-color;
@tabs-tab-icon-selected-color: @base-inverted-text-color;

@tabs-tab-button-disabled-opacity: @button-disabled-icon-opacity;

/**
* @name 30. Border color
* @type color
* @group navigations.tabs
*/
@tabs-border-color: @base-border-color;

/**
* @name 40. Focus border color
* @type color
* @group navigations.tabs
*/
@tabs-focused-border-color: @base-focus-color;
@tabs-tab-active-bg: @base-inverted-bg;

// TagBox
/**
* @name 30. Tag background color
* @type color
* @group editors.tagbox
*/
@tagbox-tag-bg: #fff - @base-bg;
/**
* @name 40. Tag text color
* @type color
* @group editors.tagbox
*/
@tagbox-tag-color: @base-inverted-text-color;
@tagbox-tag-border-radius: @base-border-radius - 2px;

/**
* @name 50. Tag close button color
* @type color
* @group editors.tagbox
*/
@tagbox-tag-button-remove-bg: @base-inverted-text-color;
@tagbox-tag-button-remove-active-bg: lighten(@tagbox-tag-button-remove-bg, 20%);

@tagbox-tag-focused-bg: @base-focus-color;
@tagbox-tag-focused-color: @base-text-color;
@tagbox-tag-focused-button-remove-bg: @tagbox-tag-button-remove-bg;

@tagbox-select-all-border-color: @base-border-color;

// NavBar
/**
* @name 10. Selected tab background color
* @type color
* @group navigations.navbar
*/
@navbar-tab-selected-bg: #fff - @base-bg;
@navbar-tab-focused-border-color: @base-focus-color;

// Scrollable

@scrollable-bg: @base-bg;

/**
* @name 10. Scroller background color
* @type color
* @group scrollview
*/
@scrollable-scroll-bg: @base-inverted-bg;
@scrollable-scroll-active-bg: @base-inverted-bg;
@scrollable-scroll-shadow-color: fade(@scrollable-bg, 20%);

@scrollable-scrollbar-bg: fade(@base-inverted-bg, 0%);
@scrollable-scrollbar-custom-bg: @base-bg;
/**
* @name 20. Scrollbar background color
* @type color
* @group scrollview
*/
@scrollable-scrollbar-active-bg: fade(@base-contrast-color, 80%);


// Toolbar
/**
* @name 10. Background color
* @type color
* @group navigations.toolbar
*/
@toolbar-bg: @base-bg;

@toolbar-color: @base-text-color;
// Toast
/**
* @name 20. Info background color
* @type color
* @group overlays.toasts
*/
@toast-info-bg: @base-info;
/**
* @name 30. Warning background color
* @type color
* @group overlays.toasts
*/
@toast-warning-bg: @base-warning;
/**
* @name 40. Error background color
* @type color
* @group overlays.toasts
*/
@toast-error-bg: @base-danger;
/**
* @name 50. Success background color
* @type color
* @group overlays.toasts
*/
@toast-success-bg: @base-success;

// LoadIndicator
/**
* @name 30. Load indicator background color
* @type color
* @group overlays.common
*/
@loadindicator-bg: @base-inverted-bg;
@loadindicator-segment-shadow-color: @base-shadow-color;

// LoadPanel
@loadpanel-border-color: @base-border-color;
@loadpanel-content-shadow-color: @base-shadow-color;
@loadpanel-content-bg: fade(@overlay-content-bg, 90%);

@loadpanel-content-border-radius: @base-border-radius + 2px;
// Slider

/**
* @name 10. Slider bar background color
* @type color
* @group sliders
*/
@slider-bar-bg: @base-border-color;

/**
* @name 30. Selected range background color
* @type color
* @group sliders
* @paletteColorOpacity 1
*/
@slider-range-bg: @base-contrast-color;
@slider-range-border-color: @slider-range-bg;
@slider-handle-bg: @base-inverted-bg;
@slider-handle-border-color: #fff - @base-border-color;
@slider-handle-active-bg: @base-inverted-bg;
@slider-handle-hover-bg: @slider-range-bg;
@slider-handle-focused-bg: @slider-handle-hover-bg;

@slider-handle-border-radius: @base-border-radius - 1px;

//ProgressBar

/**
* @name 10. Bar background color
* @type color
* @group progressbars
*/
@progressbar-bg: @base-bg;
@progressbar-border-color: @base-contrast-color;

/**
* @name 20. Selected range background color
* @type color
* @group progressbars
* @paletteColorOpacity 1
*/
@progressbar-range-bg: @base-contrast-color;
@progressbar-range-border-color: @base-contrast-color;

@progressbar-range-disabled-bg: fade(@base-contrast-color, 60%);
@progressbar-range-indeterminate-color: @base-contrast-color;

// Switch

/**
* @name 10. Border color
* @type color
* @group editors.switch
*/
@switch-border-color: @base-border-color;

/**
* @name 20. 'ON' label color
* @type color
* @group editors.switch
* @paletteColorOpacity 1
*/
@switch-on-color: @base-text-color;

@switch-bg: @base-bg;
@switch-handle-bg: @base-inverted-bg;
@switch-handle-active-bg: @base-inverted-bg;
@switch-handle-border-radius: @base-border-radius - 2px;

@switch-hover-border-color: @base-border-color;
@switch-hover-bg: @base-hover-color;
@switch-focused-border-color: @base-focus-color;

/**
* @name 30. Active state background color
* @type color
* @group editors.switch
*/
@switch-container-active-bg: @base-bg;
@switch-active-border-color: @base-border-color;

@switch-off-color: @base-text-color;
@switch-handle-off-bg: @base-inverted-bg;

@switch-readonly-border-color: darken(@switch-border-color, 50%);
@switch-container-readonly-bg: @switch-bg;

@switch-border-radius: @base-border-radius - 2px;

//Custom scrollable
@scrollable-scrollbar-arrow-custom-bg: @base-inverted-bg;
@scrollable-scrollbar-thumb-bg: @base-inverted-bg;

// ScrollView

@scrollview-shadow-color: @base-shadow-color;

//Pager

/**
* @name 170. Pager selected item background color
* @type color
* @group datagrid
* @paletteColorOpacity 1
*/
@pager-page-selected-bg: @base-inverted-bg;
@pager-page-selected-border-color: @base-border-color;
/**
* @name 175. Pager selected item text color
* @type color
* @group datagrid
* @paletteColorOpacity 1
*/
@pager-page-selected-color: @base-inverted-text-color;
@pager-page-border-radius: @base-border-radius - 1px;

// Color View
/**
* @name 10. Overlay background
* @type color
* @group editors.colorbox
*/
@colorbox-overlay-bg: @base-bg;
@colorbox-palette-cell-bg: @base-bg;

//PivoTabs
@pivottabs-tab-color: @base-text-color;
@pivottabs-tab-selected-color: @base-text-color;

//DataGrid
/**
* @name 10. Text color
* @type color
* @group datagrid
*/
@DATAGRID_BASE_COLOR: @base-text-color;

/**
* @name 60. Background color
* @type color
* @group datagrid
*/
@DATAGRID_BASE_BACKGROUND_COLOR: @base-bg;

/**
* @name 70. Border color
* @type color
* @group datagrid
*/
@DATAGRID_BORDER_COLOR: @base-border-color;

/**
* @name 20. Header text color
* @type color
* @group datagrid
*/
@datagrid-columnchooser-item-color: @base-text-color;
@datagrid-block-separator-bg: @base-inverted-bg;
@datagrid-columnchooser-font-weight: normal;
/**
* @name 71. Draggable header border color
* @type color
* @group datagrid
*/
@datagrid-drag-header-border-color: @base-border-color;
@datagrid-drag-header-shadow-color: @base-shadow-color;
@datagrid-drag-header-second-shadow-color: @base-shadow-color;
@datagrid-header-drag-bg: @base-bg;

/**
* @name 80. Selected row background color
* @type color
* @group datagrid
* @paletteColorOpacity 1
*/
@datagrid-selection-bg: @base-inverted-bg;
/**
* @name 81. Selected row border color
* @type color
* @group datagrid
*/
@datagrid-row-selected-border-color: @DATAGRID_BASE_BACKGROUND_COLOR;
/**
* @name 82. Selected row text color
* @type color
* @group datagrid
*/
@datagrid-row-selected-color: @base-inverted-text-color;

/**
* @name 90. Hovered row background color
* @type color
* @group datagrid
* @paletteColorOpacity .15
*/
@datagrid-hover-bg: @base-hover-color;

/**
* @name 70. Context menu icons color
* @type color
* @group datagrid
*/
@datagrid-menu-icon-color: @base-icon-color;
/**
* @name 71. Modified data color
* @type color
* @group datagrid
*/
@datagrid-cell-modified-border-color: @base-text-color;

@datagrid-row-removed-bg: @base-text-color;

/**
* @name 73. Invalidate data faded color
* @type color
* @group datagrid
*/
@datagrid-row-invalid-faded-border-color: @base-invalid-faded-border-color;
@datagrid-row-invalid-border-color: @base-invalid-color;

/**
* @name 30. NoData message text color
* @type color
* @group datagrid
*/
@datagrid-nodata-color: @base-text-color;

/**
* @name 120. Group row text color
* @type color
* @group datagrid
*/
@datagrid-group-row-color: @base-text-color;

/**
* @name 120. Group row background color
* @type color
* @group datagrid
*/
@datagrid-group-row-bg: #3806ff;

@HEADER_FILTER_COLOR: #3806ff;
@HEADER_FILTER_COLOR_EMPTY: @datagrid-columnchooser-item-color;

@datagrid-master-detail-cell-bg: @base-bg;

/**
* @name 150. Highlighted text color
* @type color
* @group datagrid
*/
@datagrid-search-color: @base-inverted-text-color;

@datagrid-spin-icon-color: @base-icon-color;

/**
* @name 160. Highlighted text background color
* @type color
* @group datagrid
* @paletteColorOpacity 1
*/
@datagrid-search-bg: @base-inverted-bg;

/**
* @name 170. Error row text color
* @type color
* @group datagrid
*/
@datagrid-row-error-color: @base-inverted-text-color;

/**
* @name 180. Error row background color
* @type color
* @group datagrid
*/
@datagrid-row-error-bg: @base-invalid-color;

/**
* @name 40. Link color
* @type color
* @group datagrid
* @paletteColorOpacity 1
*/
@datagrid-link-color: @base-link-color;

/**
* @name 130. Focused cell border color
* @type color
* @group datagrid
* @paletteColorOpacity 1
*/
@datagrid-focused-border-color: @base-contrast-color;
/**
* @name 131. Editor background
* @type color
* @group datagrid
*/
@datagrid-editor-bg: @DATAGRID_BASE_BACKGROUND_COLOR;
@datagrid-drop-highlight-bg: @base-inverted-bg;
@datagrid-drop-highlight-color: @base-inverted-text-color;

/**
* @name 140. Column chooser background color
* @type color
* @group datagrid
*/
@datagrid-columnchooser-bg: @base-bg;

/**
* @name 100. Row alternation background color
* @type color
* @group datagrid
*/
@datagrid-row-alternation-bg: @base-bg;
@datagrid-columnchooser-item-bg: @base-bg;

/**
* @name 170. Summary item color
* @type color
* @group datagrid
*/
@datagrid-summary-color: @base-text-color;
@datagrid-columnchooser-message-color: @base-text-color;
@datagrid-summary-bg: @base-bg;

@datagrid-overlay-content-shadow-color: fade(@base-shadow-color, 15%);
@datagrid-columnchooser-shadow-color: fade(@base-shadow-color, 20%);

@datagrid-columnchooser-overlay-border-radius: @base-border-radius + 2px;

@datagrid-column-separator-bg: darken(@DATAGRID_BASE_BACKGROUND_COLOR, 13.5%);

@datagrid-filter-operation-bg: url(images/widgets/generic/color-schemes/contrast/grid/filter-between.png);
@datagrid-filter-operation-selected-bg: url(images/widgets/generic/color-schemes/contrast/grid/filter-between-selected.png);

// dxPivotGrid

@PIVOTGRID_AREA_BACKGROUND: @base-bg;

@PIVOTGRID_BORDER_COLOR: @base-border-color;
@PIVOTGRID_AREA_COLOR: @base-text-color;
@PIVOTGRID_DATA_AREA_COLOR: @base-text-color;
@PIVOTGRID_TOTALCOLOR: @base-bg;
@PIVOTGRID_GRANDTOTALCOLOR: @base-bg;

@PIVOTGRID_ACCENT_COLOR: @base-border-color;
@PIVOTGRID_DRAG_HEADER_BORDER_COLOR: @base-border-color;
@PIVOTGRID_DRAG_HEADER_FIRST_SHADOW_COLOR: @base-shadow-color;
@PIVOTGRID_DRAG_HEADER_SECOND_SHADOW_COLOR: @base-shadow-color;

@PIVOTGRID_AREA_ALL_IMAGE: url(images/widgets/generic/color-schemes/contrast/grid/area-all.png);
@PIVOTGRID_AREA_FILTER_IMAGE: url(images/widgets/generic/color-schemes/contrast/grid/area-filter.png);
@PIVOTGRID_AREA_COLUMN_IMAGE: url(images/widgets/generic/color-schemes/contrast/grid/area-column.png);
@PIVOTGRID_AREA_ROW_IMAGE: url(images/widgets/generic/color-schemes/contrast/grid/area-row.png);
@PIVOTGRID_AREA_DATA_IMAGE: url(images/widgets/generic/color-schemes/contrast/grid/area-data.png);

@PIVOTGRID_DIMENSION_IMAGE: url(images/widgets/generic/color-schemes/contrast/grid/dimension.png);
@PIVOTGRID_HIERARCHY_IMAGE: url(images/widgets/generic/color-schemes/contrast/grid/hierarchy.png);

@PIVOTGRID_FIELD_AREA_TEXT_COLOR: @PIVOTGRID_AREA_COLOR;
@PIVOTGRID_POSITION_INDICATOR_COLOR: @base-contrast-color;
/**
* @name 70. Spin icon color
* @type color
* @group pivotgrid
*/
@pivotgrid-spin-icon-color: @base-icon-color;


//dxScheduler

@SCHEDULER_BASE_BORDER_COLOR: @base-border-color;

@scheduler-cell-active-bg: @base-border-color;
@scheduler-cell-hover-bg: @base-border-color;

@scheduler-group-separator-border-color: @base-border-color;
@SCHEDULER_ACCENT_BORDER_COLOR: @base-border-color;

@SCHEDULER_DROPPABLE_CELL_BACKGROUND_COLOR: @base-bg;

@SCHEDULER_APPOINTMENT_BASE_COLOR: @base-contrast-color;
@SCHEDULER_APPOINTMENT_TEXT_COLOR: @base-text-color;
@scheduler-appointment-focus-color: #fff - @base-text-color;
@SCHEDULER_APPOINTMENT_START_COLOR: @base-inverted-bg;

@SCHEDULER_WORKSPACE_FOCUSED_CELL_COLOR: lighten(@base-contrast-color, 5%);

@SCHEDULER_PANEL_TEXT_COLOR: @base-text-color;
@SCHEDULER_WORKSPACE_MONTH_TEXT_COLOR: @base-text-color;

@scheduler-dropdown-appointment-date-color: @base-text-color;

@SCHEDULER_TIME_PANEL_BACKGROUND_COLOR: @base-bg;

@SCHEDULER_WORKSPACE_BACKGROUND_COLOR: @base-bg;
@scheduler-popup-title-bg: @SCHEDULER_WORKSPACE_BACKGROUND_COLOR;

@SCHEDULER_WORKSPACE_ACTIVE_CELL_COLOR: @SCHEDULER_ACCENT_BORDER_COLOR;
@SCHEDULER_WORKSPACE_HOVERED_CELL_COLOR: #fff - @base-text-color;

@scheduler-group-header-color: @base-text-color;

@scheduler-header-bg: @base-bg;
@scheduler-alldaypanel-bg: @base-bg;

@scheduler-recurence-editor-bg: fade(@base-inverted-bg, 40%);
@scheduler-tab-selected-bg: @base-inverted-bg;
@scheduler-tab-selected-before-bg: transparent;

@scheduler-tab-focused-border-color: @base-border-color;
@scheduler-recurence-editor-border-color: fade(#fff - @base-border-color, 70%);
@SCHEDULER_OTHER_MONTH_CELL_OPACITY: 1;
@SCHEDULER_FILL_FOCUSED_APPOINTMENT: true;

//SlideOutView

@slideoutview-content-border-color: fade(@base-border-color, 50%);
@slideoutview-bg: @base-bg;

//Menu
/**
* @name 40. Popup background color
* @type color
* @group navigations.menu
*/
@menu-popup-bg: @base-bg;
/**
* @name 50. Hovered item background color
* @type color
* @group navigations.menu
* @paletteColorOpacity .15
*/
@menu-item-hover-bg: @base-hover-color;
@menu-item-expanded-color: @base-text-color;
/**
* @name 60. Selected item background color
* @type color
* @group navigations.menu
* @paletteColorOpacity 1
*/
@menu-item-selected-bg: @base-inverted-bg;
/**
* @name 20. Border color
* @type color
* @group navigations.menu
*/
@menu-popup-border-color: @base-border-color;
/**
* @name 10. Text color
* @type color
* @group navigations.menu
*/
@menu-color: @base-text-color;

@menu-separator-bg: @base-border-color;
@menu-item-selected-color: @base-inverted-text-color;
@menu-item-focused-selected-bg: @base-inverted-bg;

@menu-container-shadow-color: fade(@base-shadow-color, 15%);

//Calendar
/**
* @name 10. Text color
* @type color
* @group editors.calendar
*/
@calendar-color: @base-text-color;
/**
* @name 20. Header text color
* @type color
* @group editors.calendar
*/
@calendar-header-color: @base-text-color;
/**
* @name 30. Other month text color
* @type color
* @group editors.calendar
*/
@calendar-cell-other-color: @base-contrast-color;
/**
* @name 40. Background color
* @type color
* @group editors.calendar
*/
@calendar-bg: @base-bg;
/**
* @name 50. Hovered cell background color
* @type color
* @group editors.calendar
* @paletteColorOpacity .15
*/
@calendar-hover-bg: @base-hover-color;

@calendar-cell-hover-color: @base-text-color;
@calendar-cell-other-hover-color: @base-text-color;
/**
* @name 60. Selected cell background color
* @type color
* @group editors.calendar
*/
@calendar-cell-selected-bg: @base-inverted-bg;
/**
* @name 70. Active state background Color
* @type color
* @group editors.calendar
*/
@calendar-cell-active-bg: @base-contrast-color;
/**
* @name 80. Border color
* @type color
* @group editors.calendar
*/
@calendar-border-color: @base-border-color;

@calendar-navigator-border-color: @calendar-border-color;
@calendar-navigator-border-radius: @base-border-radius;
@calendar-navigator-hover-border-color: @calendar-border-color;

@calendar-cell-contoured-border-color: @calendar-border-color;
@calendar-cell-contoured-border-radius: @base-border-radius;

@calendar-invalid-focused-border-color: @base-invalid-color;
@calendar-invalid-faded-border-color: @base-invalid-faded-border-color;

@calendar-button-caption-active-bg: @base-inverted-bg;
@calendar-button-footer-active-bg: @base-inverted-bg;

/**
* @name 110. Shevron icon color
* @type color
* @group editors.calendar
*/
@calendar-shevron-icon-color: @base-icon-color;

//Calendar picker
@datebox-dropdowneditor-button-active-shadow-color: @base-shadow-color;

//Tooltip
/**
* @name 10. Text color
* @type color
* @group overlays.tooltip
*/
@tooltip-color: @base-inverted-text-color;
/**
* @name 20. Background color
* @type color
* @group overlays.tooltip
*/
@tooltip-bg: @base-inverted-bg;
/**
* @name 30. Border color
* @type color
* @group overlays.tooltip
*/
@tooltip-border-color: @base-border-color;
@tooltip-shadow-color: @base-shadow-color;
@tooltip-border-radius: @base-border-radius;

/**
* @name 10. Active spin buttons color
* @type color
* @group editors.numberbox
*/
@numberbox-spin-active-bg: @base-inverted-bg;
@numberbox-spin-active-color: #fff - @base-border-color;
/**
* @name 20. Hovered spin buttons border color
* @type color
* @group editors.numberbox
*/
@numberbox-spin-hover-border-color: @base-border-color;
@numberbox-spin-hover-bg: @base-hover-color;

@numberbox-spin-container-border-radius: @base-border-radius;
@numberbox-spin-icon-border-radius: @base-border-radius - 1px;
/**
* @name 30. Spin icon color
* @type color
* @group editors.numberbox
*/
@numberbox-spin-icon-color: @base-icon-color;

// TileView
/**
* @name 10. Item text color
* @type color
* @group tileview
*/
@tileview-color: @base-text-color;
@tileview-bg: @base-bg;
@tileview-border-color: @base-border-color;
@tileview-hover-bg: @base-hover-color;
@tileview-hover-border-color: @base-border-color;
@tileview-active-bg: @base-inverted-bg;
@tileview-active-color: @base-inverted-text-color;

// TreeView

/**
* @name 80. Focused state background color ('showCheckBoxes' mode is false)
* @type color
* @group navigations.treeview
* @paletteColorOpacity 1
*/
@treeview-focused-bg: @base-focus-color;
@treeview-focus-color: @base-inverted-text-color;
/**
* @name 90. Hovered state background color
* @type color
* @group navigations.treeview
* @paletteColorOpacity .15
*/
@treeview-hover-bg: @base-hover-color;
@treeview-item-hover-color: @base-text-color;
/**
* @name 100. Border color
* @type color
* @group navigations.treeview
*/
@treeview-border-color: @base-border-color;
@treeview-item-selected-color: @base-inverted-text-color;
@treeview-item-selected-bg: @base-inverted-bg;

/**
* @name 120. Spin icon color
* @type color
* @group navigations.treeview
*/
@treeview-spin-icon-color: @base-icon-color;

//TimeView
@timeview-clock-bg: data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/generic/color-schemes/contrast/timeView/clock-bg.svg');
@timeview-hourarrow-bg: data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/generic/color-schemes/contrast/timeView/hour-arrow.svg');
@timeview-minutearrow-bg: data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/generic/color-schemes/contrast/timeView/min-arrow.svg');

// theme-depends shadow parameters

//DateView
@dateview-border-color: @base-border-color;
@dateview-shadow-up: bottom, fade(@base-bg, 0%) 0%, fade(@base-bg, 80%) 60%;
@dateview-shadow-down: top, fade(@base-bg, 0%) 0%, fade(@base-bg, 80%) 60%;
@dateview-color: @base-text-color;

//ColorView
@COLORVIEW_HANDLE_COLOR: @base-inverted-bg;
@COLORVIEW_HANDLE_BORDER_COLOR: fade(@base-border-color, 20%);
@colorview-border-color: @base-border-color;
@colorview-label-color: @base-label-color;

//Form

/**
* @name 10. Label text color
* @type color
* @group form
*/
@form-field-item-color: @base-label-color;
/**
* @name 20. Group border color
* @type color
* @group form
*/
@form-group-border-color: @base-border-color;
@form-field-required-color: saturate(darken(@base-text-color, 40.8%), 80%);
@form-field-mark-color: @base-contrast-color;

// Images
@list-item-icon-toggle-delete-bg: url(images/widgets/generic/color-schemes/contrast/list/delete.png);
@scrollview-pull-down-bg: url(images/widgets/generic/color-schemes/light/pulldown.png) 0 0 no-repeat;
@loadindicator-image-bg: url(images/widgets/generic/color-schemes/light/loader64.gif);
@toast-info-icon-image-bg: url(images/widgets/generic/color-schemes/light/toast/info.png);
@toast-warning-icon-image-bg: url(images/widgets/generic/color-schemes/light/toast/warning.png);
@toast-error-icon-image-bg: url(images/widgets/generic/color-schemes/light/toast/error.png);
@toast-success-icon-image-bg: url(images/widgets/generic/color-schemes/light/toast/success.png);
@sctollbar-button-horizontal-decrement-bg: url(images/widgets/generic/color-schemes/contrast/scrollable/scrollbar-horizontal-arrow-start.png) no-repeat;
@sctollbar-button-horizontal-increment-bg: url(images/widgets/generic/color-schemes/contrast/scrollable/scrollbar-horizontal-arrow-end.png) no-repeat;
@sctollbar-button-vertical-decrement-bg: url(images/widgets/generic/color-schemes/contrast/scrollable/scrollbar-vertical-arrow-up.png) no-repeat;
@sctollbar-button-vertical-increment-bg: url(images/widgets/generic/color-schemes/contrast/scrollable/scrollbar-vertical-arrow-down.png) no-repeat;
@colorbox-preview-empty-bg: url(images/widgets/generic/color-schemes/contrast/colorbox/nocolor.png);
@calendar-cell-empty-bg: url(images/widgets/generic/color-schemes/contrast/calendar/empty-cell.png) center center no-repeat;

// SPA
// Desktop

@desktop-layout-main-menu-bg: @base-inverted-bg;

@desktop-layout-menu-color: @base-text-color;
@desktop-layout-menu-selected-bg: @base-inverted-bg;

@desktop-layout-toolbar-border-color: @base-border-color;
@desktop-layout-menu-hover-bg: @base-contrast-color;
@desktop-layout-copyright-color: @base-text-color;

// Master-detail

@desktop-splitlayout-border-color: @base-border-color;

// Fieldset

@fieldset-field-label-color: @base-label-color;
@fieldset-field-value-invalid-color: @base-invalid-color;
